<!--
 * @Author: QUAN
 * @Date: 2021-08-27 11:04:26
 * @LastEditTime: 2021-11-08 14:52:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\Share\index.vue
-->
<template>
  <div class="share">
    <bottom-open-app-adv v-if="!$UA.isJM"></bottom-open-app-adv>
    <van-nav-bar
      title="邀请好友"
      left-arrow
      v-if="$UA.isJM"
      @click-left="toJM"
      class="my-nav-bar"
    ></van-nav-bar>
    <div class="header" :class="{ app: !$UA.isJM }">
      <img src="@/assets/images/activity/y-friends.png" alt="" />
    </div>
    <div class="body">
      <p>每邀请一位好友参与奖励10积木</p>
      <van-button size="small" @click="invite">立即邀请</van-button>
      <p class="success-invite">
        成功邀请
        <span>{{ successInvite }}</span>
        人
      </p>
      <p class="line"></p>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item, index) in friendsList" :key="index">
          <div class="friends">
            <img :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
            <span class="invite-time">{{ item.createdAt }}</span>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Button, List, Cell, NavBar } from 'vant';
  import mixins from 'mixins';
  import share from '../../utils/share';
  export default {
    mixins: [mixins],
    components: {
      BottomOpenAppAdv,
      'van-button': Button,
      'van-list': List,
      'van-cell': Cell,
      'van-nav-bar': NavBar,
    },
    computed: {
      ...mapGetters(['$userInfo']),
    },
    created() {},
    mounted() {
      this.$appService.setNav({
        title: '邀请好友',
        fullscreen: true,
      });

      // 微信分享
      wx.ready(() => {
        let temp = Math.floor(Math.random() * share.random.length);
        let _ = share.random[temp];
        if (this.$userInfo.uuid) {
          _.link = this.shareConfig.link + `?uuid=${this.$userInfo.uuid}`;
        }
        this.$setShareInfo({ ...this.shareConfig, ..._ });
      });

      this.$EventBus.$on('jm:hybridActive', () => {
        // 刷新
        // this.friendsList = [];
      });
    },
    data() {
      return {
        // list加载
        loading: false,
        finished: false,
        page: 0,
        // 邀请好友列表
        friendsList: [],
        // 成功邀请的数量
        successInvite: '',
        // 分享的配置
        shareConfig: {
          title: '神秘盲盒空降积幕',
          desc: '蓝牙耳机、GoPro运动相机、智能家居等N种好礼等你抽，总有一款适合你！',
          link: `https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/activity/blindbox.html`,
          imgUrl: 'https://mutong-ketang-img.oss-cn-shanghai.aliyuncs.com/res/blind-box.png',
        },
      };
    },
    methods: {
      // 去积幕
      toJM() {
        window.location.href = new URL(`blindbox.html`, window.location.href);
      },
      // 立即邀请
      invite() {
        if (this.$UA.isJM) {
          let temp = Math.floor(Math.random() * share.random.length);
          let _ = share.random[temp];
          if (this.$userInfo.uuid) {
            _.link = this.shareConfig.link + `?uuid=${this.$userInfo.uuid}`;
          }
          this.$appService.share({ ...this.shareConfig, ..._ });
        } else {
          this.$Toast('点击右上角分享吧');
        }
      },
      // 加载数据
      onLoad() {
        this.page += 1;
        this.getFriends();
      },
      // 获取奖品列表
      getFriends() {
        this.$service.UserInviteUsers({ page: this.page, size: 10 }).then((res) => {
          this.friendsList = this.friendsList.concat(res.rows);
          this.successInvite = res.total;
          this.loading = false;
          if (this.friendsList.length >= res.total || res.total === 0) {
            this.finished = true;
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .share {
    // vant样式修改
    .van-button {
      width: 7.8rem;
      height: 3.2rem;
      background: #00be8b;
      border-radius: 1.6rem;
      color: #fff;
    }
    .van-cell {
      &::after {
        content: none;
      }
    }
    /deep/ .van-nav-bar {
      .van-nav-bar__title {
        color: #111;
        font-weight: 600;
        font-size: 18px;
      }
      .van-nav-bar__arrow {
        font-size: 18px;
      }
      .van-nav-bar__right {
        img {
          width: 2.2rem;
          height: 2.2rem;
        }
      }
      .van-icon {
        color: #111;
      }
    }

    // navbar
    .my-nav-bar {
      height: 8.4rem;
      padding-top: 3.5rem;
    }

    // 页面样式
    .header {
      width: 100%;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        height: 25rem;
      }
      &.app {
        margin-top: 6.5rem;
      }
    }
    .body {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      margin-top: -1.2rem;
      border-radius: 1.2rem 1.2rem 0px 0px;
      text-align: center;
      font-weight: 500;
      padding: 0rem 2rem;
      p {
        margin-top: 2rem;
        font-size: 1.4rem;
        color: #00be8b;
      }
      .van-button {
        width: 32rem;
        height: 4.5rem;
        background: #00be8b;
        border-radius: 2.3rem;
        color: #fff;
        font-size: 1.8rem;
        margin-top: 1.2rem;
      }
      .success-invite {
        font-size: 1.4rem;
        color: #111;
        text-align: left;
        span {
          font-size: 1.8rem;
          color: #00be8b;
        }
      }
      .line {
        width: 33.5rem;
        height: 0.2rem;
        background: #f3f3f3;
        margin-top: 1rem;
      }

      .friends {
        position: relative;
        img {
          display: inline-block;
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 50%;
          vertical-align: middle;
        }
        span {
          margin-left: 1.4rem;
          color: #111;
          font-size: 1.4rem;
        }
        .invite-time {
          position: absolute;
          right: 0rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .van-cell {
        padding: 1.3rem 0rem;
      }
    }
  }
</style>
